<template lang="pug">
  .plugin-frame.page(v-if="data")
    .plugin-content
      .ctrl-bar.ctrl-bar-top
        .icon.close(@click="data = null")
          i.iconfont &#xe60b;
      p.tac
        | 浏览器不支持微信插件
        br
        | 请使用微信扫描二维码查看
      .qrcode
        img(:src="qrcode")
</template>

<script>

export default {
  data() {
    return {
      data: null,
      qrcode: ''
    }
  },
  mounted() {
    this.$vgo.on('iframe:plugin', data => {
      // console.log(data)
      this.data = data
      this.qrcode = $globalconfig.URLS.API + 'api_qrcode.aspx?id=' + this.$route.params.panoId + '&newpano=1'
    })
  }
}
</script>

<style lang="stylus">
$black = #000
.plugin-frame.page
  background: rgba($black, .5)
  .plugin-content
    position: absolute
    left: 50%
    top: 50%
    width: 300px
    height: 340px
    padding: 10px 20px 20px
    transform: translate(-50%, -50%)
    background: #F2F6FC
    .ctrl-bar-top
      right: 0
      top: 0
      z-index: -1
      .close
        border-radius: 0
    p
      padding: 15px 0
      font-size: 18px
      color: #666
    .qrcode
      img
        width: 260px
        height: 260px
</style>
